<script>
export default {
  data() {
    return {
      tableData: [],
      agform:[],
      teams:[],
      packs:[],
      formInline: {},
      pageNum:1,
      pageSize:2,
      total:0,
    }
  },
  methods: {
    findPage(){
      this.axios.post(`http://localhost:9000/b/stables/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,this.formInline).then(res=>{
        this.tableData=res.data.data.records;
        this.total=res.data.data.total;
      })
    },
    getAg(){
      this.axios.post(`http://localhost:9000/b/agencies/list`).then(res=>{
        this.agform=res.data.data;
      })
    },
    getTimes(){
      this.axios.post(`http://localhost:9000/b/team/list`).then(res=>{
        this.teams=res.data.data;
      })
    },
    getPacks(){
      this.axios.post(`http://localhost:9000/b/packs/list`).then(res=>{
        this.packs=res.data.data;
      })
    },
    handleSizeChange(val) {
      this.pageSize=val;
      this.findPage()
    },
    handleCurrentChange(val) {
      this.pageNum=val;
      this.findPage()
    },
    // tiao(){
    //   this.$router.push('/add')
    // },
    goToAddPage(){
      this.$router.push({ path: '/addView'})
    },
    goToExport(){
      location.href="http://localhost:9000/b/stables/exportExcel"
    },

    // goToDetialPage(){
    //   this.$router.push({ path: '/detial'})
    // },
    xq(id){ //跳转到详情页面方法
      localStorage.setItem("id",JSON.stringify(id))
      this.$router.push("/xq")
    },
    update(id){ //跳转到详情页面方法
      localStorage.setItem("id",JSON.stringify(id))
      this.$router.push("/Update")
    },
  },

  created() {
    this.findPage()
    this.getTimes()
    this.getAg()
    this.getPacks()
  },




}
</script>

<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">

      <el-form-item>
        <el-input v-model="formInline.number" placeholder="请输入编号"></el-input>
      </el-form-item>
      <el-form-item label="服务状态" clearable>
        <el-select v-model="formInline.status" placeholder="服务状态">
          <el-option label="全部" value=""></el-option>
          <el-option label="待审核" :value=1></el-option>
          <el-option label="待服务" :value=2></el-option>
          <el-option label="已驳回" :value=0></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="签约机构" clearable>
        <el-select v-model="formInline.ageid" placeholder="签约机构">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in agform" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="医生团队" clearable>
        <el-select v-model="formInline.tid" placeholder="医生团队">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in teams" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="服务包" clearable>
        <el-select v-model="formInline.pid" placeholder="服务包">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in packs" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="findPage">搜索</el-button>
        <el-button type="primary" @click="goToAddPage">新增服务</el-button>
        <el-button type="primary" @click="goToExport">导出</el-button>


      </el-form-item>
    </el-form>

    <el-table
        :data="tableData"
        stripe
        style="width: 100%">
      <el-table-column
          prop="number"
          label="编号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="dewname"
          label="签约人姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="identity"
          label="身份证号">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="手机号码">
      </el-table-column>
      <el-table-column
          prop="status"
          label="签约状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status==1" style="color: rgba(59,246,59,0.46)">待审核</span>
          <span v-else-if="scope.row.status==2" style="color: #FDDB78">待服务</span>
          <span v-else-if="scope.row.status==0" style="color: rgba(255,0,0,0.63)">已驳回</span>
          <span v-else-if="scope.row.status==3" style="color: rgb(107,117,242)">已完成</span>
          <span v-else-if="scope.row.status==4" style="color: #a19c9c">已取消</span>

        </template>
      </el-table-column>
      <el-table-column
          prop="tname"
          label="签约医生团队">
      </el-table-column>
      <el-table-column
          prop="pname"
          label="签约服务包">
      </el-table-column>
      <el-table-column
          prop="booking"
          label="申请时间">
      </el-table-column>
      <el-table-column
          prop="address"
          label="操作">
<!--        <a :style="{ color: '#6C76F4', textDecoration: 'underline' }" @click="xq()">查看详情</a>-->
        <template slot-scope="scope">

          <el-button type="text" @click="xq(scope.row.id)">查看详情</el-button>
          <el-button type="text" @click="update(scope.row.id)">编辑</el-button>
<!--          <el-button type="text" @click="goToAddPage">编辑</el-button>-->
        </template>
<!--        <a :style="{ color: '#6C76F4', textDecoration: 'underline' }" @click="goToDetialPage">查看详情</a>-->
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>

</template>

<style>

</style>
